<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="同学你好,同学你好导航,网址导航,自定义网址导航,定制网址导航,同学你好邀请码">
    <meta name="description" content="同学你好是一款高度可定制化的网址导航，可为每个用户提供个性化域名访问的导航页面。独一无二的定制化功能注定成为导航届的一批黑马，你的专属主页。">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="baidu_union_verify" content="6205508d44c10962cda3c47d998c7ef2">
    <link rel="icon" href="/favicon.ico">
    <title>同学你好</title>
    <#include "/common/public.html"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="/css/collect.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/css/nav.css"/>
    <link rel="stylesheet" type="text/css" href="/css/addcollect.css"/>
    <style>
        .white {
            background: url(/img/bg.png) rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            overflow: hidden;
        }

        .content {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: auto;
            background: url(img/bg.png) rgb(255, 255, 255);
            z-index: 2;
        }

        .ksd-item-box {
            position: relative
        }

        .ksd-closebtn {
            position: absolute;
            top: 1px;
            cursor: pointer;
            right: 15px;
            z-index: 100;
            display: none;
        }

        .ksd-editbtn {
            position: absolute;
            top: 1px;
            cursor: pointer;
            right: 30px;
            z-index: 100;
            display: none;
        }

        .ksd-item-box:hover .ksd-editbtn, .ksd-item-box:hover .ksd-closebtn {
            display: block;
        }

        .ksd-closebtn i {
            color: black
        }

        .overlay {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 999
        }

        .tool-box li.last-li {
            display: none;
        }

        .tool-content:hover .tool-box li.last-li {
            display: block
        }
    </style>
</head>
<body class="white">
<#include "/common/header.html"/>
<div id="app">
    <div style="height: 100%;" v-show="false">
        <div class="bg">
            <div style="margin: 100px auto;"><span class="siteName">同学你好</span>
                <div style="margin: 10px auto;"></div>
                一切都是最好的开始
            </div>
            <div class="search">
                <div class="serach">
                    <div class="el-row is-justify-center el-row--flex">
                        <li class="li-tab"><i class="fa fa-cog fa-spin"></i> 留言板</li>
                        <li class="li-tab active"> 常用
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 视频
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 资源
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 学术
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 社交
                            <div class="trangle "></div>
                        </li>
                        <li class="li-tab"> 生活
                            <div class="trangle "></div>
                        </li>
                    </div>
                    <div class="el-row is-justify-center el-row--flex">
                        <li class="li-tab activeEngine"> 百度</li>
                        <li class="li-tab"> 谷歌</li>
                        <li class="li-tab"> 360</li>
                        <li class="li-tab"> Bing</li>
                        <li class="li-tab"> 多吉</li>
                        <li class="li-tab"> 搜狗</li>
                    </div>
                    <br>
                    <div class="el-row is-justify-center el-row--flex">
                        <div class="el-col el-col-24 el-col-xs-23 el-col-sm-18 el-col-md-10">
                            <div class="el-input el-input-group el-input-group--append el-input--suffix"
                                 style="position: relative;">
                                <form method="get" action="https://www.baidu.com/s" target="_blank">
                                    <input type="text" autocomplete="off" name="wd" autofocus="autofocus"
                                           placeholder="百度一下,你就知道" class="el-input__inner">
                                    <div style="position: absolute;top:6px;right:20px;">
                                        <button type="submit"
                                                style="width: 60px;height: 40px;border: 0;background:transparent;"><span
                                                type="text"><i class="fa fa-search"></i></span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="el-col el-col-24">
                <div class="totop">
                    <div style="height: 200px;"></div>
                    <div>
                        <div>
                            <div class="el-col el-col-24">
                                <div class="copyright">
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426">意见反馈</a>
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426/blog/11015">免责声明</a>
                                    <a target="_blank" rel="nofollow"
                                       href="https://support.qq.com/products/106426/blog/10953">请作者吃辣条</a>
                                    <div style="height: 10px;"></div>
                                    友情链接
                                    <a target="_blank" rel="follow" href="http://www.itbooking.net">同学你好</a>
                                    <a target="_blank" rel="follow" href="https://www.runningcheese.com/">奔跑中的奶酪</a>
                                    <a target="_blank" rel="follow" href="https://met.red/">遇见数据仓库</a>
                                    <a target="_blank" rel="follow" href="https://www.24kdh.cn/">24k导航</a>
                                    <a target="_blank" rel="follow" href="https://creatorsdaily.com/">创造者日报</a>
                                    <a target="_blank" rel="follow" href="http://zyplayer.fun/">ZY Player</a>
                                    <a target="_blank" rel="follow" href="http://www.qyun.vip/">Q云</a>
                                    <li>
                                        <a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn/"
                                           style="color: grey;">京ICP备19043213号</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);" id="settingnav" style="color: grey;">设置导航</a>
                                    </li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="contentx animate__animated animate__slideInDown">
        <div class="content-body">
            <div class="tool-card today">
                今天是：2021年11月18日 星期四 农历十月十四 ，2021年已经过去了87.95%，要加油哦！
            </div>
            <a href="javascript:void(0);" id="closenav" style="color: grey;">关闭</a>
            <div class="tool-content" v-for="(collect,index) in collectVoList" :key="collect.categoryId">
                <h3 class="tool-cate">{{collect.categoryTitle}}</h3>
                <ul class="tool-box">

                    <li v-for="(item,cindex) in collect.collectList" :key="item.id" class="ksd-item-box">
                        <a :href="item.hrefLink" target="_blank" :title="item.title">
                            <dl class="tool-card">
                                <dt><img v-bind:src="item.iconLink" :alt="item.iconLink">
                                    <strong>{{item.title}}</strong></dt>
                                <dd>
                                    <span class="tool-hits fl"><i class="icon-eye"></i> {{item.viewNumber}} </span>
                                    <span class="fr"><i class="icon-thumbs-up"></i> {{item.likeNumber}}</span>
                                </dd>
                            </dl>
                        </a>
                        <a href="javascript:void(0);" @click="editItem(index,cindex)" class="ksd-editbtn"><i
                                class="iconfont icon-tianxie"></i></a>
                        <a href="javascript:void(0);" @click="delItem(index,cindex)" class="ksd-closebtn"><i
                                class="iconfont icon-shanchu"></i></a>
                    </li>

                    <li>
                        <a href="javascript:void(0);" @click="expandAddBox(index)">
                            <div class="tool-card ksd-tool-card">
                                <span>+</span>
                            </div>
                        </a>
                    </li>
                </ul>
                <div>
                    <div>
                        <span style="color: blue">总共有{{collect.pageMap.total}}条数据,每页显示{{collect.pageMap.pageSize}}条,现在是第{{collect.pageMap.pageNo}}/共{{collect.pageMap.pages}}页</span>
                    </div>
                    <div v-if="collect.pageMap.pages > 1">
                        <button @click="loadMore(index)" v-if="collect.pageMap.pageNo < collect.pageMap.pages">点击加载更多
                        </button>
                        <div v-else><span>没有更多了......</span></div>
                    </div>
                    <div v-else><span>没有更多了......</span></div>
                </div>
            </div>
        </div>
    </div>
    <transition
            name="custom-classes-transition"
            enter-active-class="animate__animated  animate__fadeInRight"
            leave-active-class="animate__animated  animate__fadeOutRight">
        <div class="ksd-addcollect-box" v-show="expandAddFlag">
            <div>
                <p>
                    <input type="hidden" v-model="collect.categoryTitle">
                    <label class="tit">分类ID</label>
                    <select id="categoryId" v-model="optionObj" @change="selectOption">
                        <option value="">--请选择分类--</option>
                        <option v-bind:value="option" v-for="(option,index) in optionArr">{{option.categoryTitle}}
                        </option>
                    </select>
                </p>
                <p>
                    <label class="tit" for="title">标题</label>
                    <input type="hidden" v-model="collect.id">
                    <input type="text" autofocus v-model.trim="collect.title" id="title" placeholder="请输入标题"
                           maxlength="100">
                </p>
                <p>
                    <label class="tit" for="iconlink">链接图标</label>
                    <input type="text" v-model.trim="collect.iconLink" id="iconlink" placeholder="请输入链接图标"
                           maxlength="400">
                </p>
                <p>
                    <label class="tit" for="hreflink">跳转地址</label>
                    <input type="text" v-model.trim="collect.hrefLink" id="hreflink" placeholder="请输入跳转地址"
                           maxlength="400">
                </p>
                <p>
                    <label class="tit" for="sorted">排序</label>
                    <input type="text" v-model.number="collect.sorted" id="sorted" placeholder="请输入排序" maxlength="8">
                </p>
                <p>
                    <label class="tit">发布状态</label>
                    <label><input type="radio" v-model="collect.status" value="1"> 发布</label>
                    <label><input type="radio" v-model="collect.status" value="0"> 未发布</label>
                </p>
                <p>
                    <button class="savebtn" @click="saveCollect">保存收藏</button>
                </p>
            </div>
        </div>
    </transition>
    <div class="overlay" @click="closeAddBox" v-show="expandAddFlag"></div>

    <div id="go-top" style="display:;">
        <a rel="nofollow" title="回顶部"><i class="icon-up-big"></i></a>
    </div>

    <#include "/common/footer.html"/>
</div>
<script src="/js/jquery.min.js"></script>
<script>
    // $(function(){
    // 	$("#settingnav").on("click",function(){
    // 		$(".content").show().removeClass("animate__animated animate__slideOutUp")
    // 				.addClass("animate__animated animate__slideInDown");
    // 	})
    //
    // 	$("#closenav").show().on("click",function(){
    // 		$(".content").removeClass("animate__animated animate__slideInDown")
    // 				.addClass("animate__animated animate__slideOutUp");
    // 	})
    // });
</script>

<script src="/js/vue.global.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/collect/index.js"></script>

</body>

</html>